<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools>
        <template #after>
          <el-button
            type="primary"
            size="mini"
            @click="addPermission('0', 1)"
          >
            {{ $t('route.addPermission') }}
          </el-button>
        </template>
      </PageTools>
      <!-- 表格 -->
      <el-table
        border
        :data="permissionList"
        row-key="id"
        default-expand-all
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
        />
        <el-table-column
          label="名称"
          prop="name"
        />
        <el-table-column
          align="center"
          label="标识"
          prop="code"
        />
        <el-table-column
          align="center"
          label="描述"
          prop="description"
        />
        <el-table-column label="操作">
          <template #default="{row}">
            <el-button
              v-if="row.type === 1"
              type="text"
              icon="el-icon-document-add"
              @click="addPermission(row.id, 2)"
            >添加
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="editPermission(row.id)"
            >编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-s-tools"
              style="color: red"
              @click="delPermission(row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <el-dialog
      :visible="showDialog"
      :title="showTitle"
      @close="close"
    >
      <!-- 表单 -->
      <el-form
        ref="perForm"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" style="width:90%" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="formData.enVisible"
            active-value="1"
            inactive-value="0"
            active-color="red"
            inactive-color="black"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="center">
          <el-button
            type="primary"
            size="mini"
            @click="btnOk"
          >确定
          </el-button>
          <el-button size="mini" @click="close">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>

// 人资总结
// 1、登录
//    需要填写账号和密码
//    点击登录的时候调用接口，获取到的token存储到了什么地方。
import {
  addPermissionApi,
  delPermissionApi,
  getPermissionDetail,
  getPermissionListApi,
  updatePermissionApi
} from '@/api/permission'
import { transListToTree } from '@/utils'

export default {
  name: 'Permission',
  data() {
    return {
      permissionList: [],
      showDialog: false,
      // formData数据和rules数据
      formData: {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        // 提交数据的时候需要这两个字段
        type: '', // 类型 表示的页面权限或者按钮权限，操作权限(2)还是访问权限(1)
        pid: '', // 一级的pid是'0' 添加上去的节点出现在那个父节点下面
        enVisible: '1' // 开启
      },
      // 新增或者编辑弹框的校验规则，
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑权限' : '新增权限'
    }
  },
  created() {
    this.getPermissionList()
  },
  methods: {
    async delPermission(id) {
      await this.$confirm('是否确认删除？')
      await delPermissionApi(id)
      this.$message.success('删除成功')
      this.getPermissionList()
    },
    async editPermission(id) {
      //   1、请求当前id对应的详情数据，表单进行回显
      //   2、弹出弹层
      //   3、覆盖掉formData
      this.formData = await getPermissionDetail(id)
      this.showDialog = true
    },
    close() {
      // 重置数据
      this.formData = {
        name: '', // 名称
        code: '', // 标识
        description: '', // 描述
        // 提交数据的时候需要这两个字段
        type: '', // 类型 表示的页面权限或者按钮权限，操作权限(2)还是访问权限(1)
        pid: '', // 一级的pid是'0' 添加上去的节点出现在那个父节点下面
        enVisible: '1' // 开启
      }
      // 清除校验效果，重置表单
      this.$refs.perForm.resetFields()
      // 关闭弹层
      this.showDialog = false
    },
    async btnOk() {
      // 提交数据方法
      // await的含义表示：校验出错，代码是不会继续执行的
      await this.$refs.perForm.validate()
      // 判断是新增还是编辑，判断数据里面有没有id
      // 如果数据里面有id证明是编辑，如果没有说明是新增
      if (this.formData.id) {
        // 调用编辑接口
        await updatePermissionApi(this.formData)
        this.$message.success('编辑权限成功')
      } else {
        // 提交数据 => 调用新增接口
        await addPermissionApi(this.formData)
        // 添加成功以后进行成功的提示
        this.$message.success('添加权限成功')
      }
      this.close()
      // 关闭弹层 => 重置表单校验和数据
      // 重新获取数据,重新调用获取数据的接口就ok
      this.getPermissionList()
    },
    /**
     * 添加权限的方法
     * @param {string} pid - 当前点击节点的id
     * @param {1|2} type - 权限类型
     * @return {Promise<void>}
     * @example
     *  addPermission('0', 1)
     */
    // q: 作用是什么？
    // a: 用来添加权限的
    async addPermission(pid, type) {
      // 1、弹出弹层
      this.showDialog = true
      // 2、设置formData的pid和type
      this.formData.pid = pid
      this.formData.type = type
    },
    async getPermissionList() {
      // res现在是一个扁平的数组结构，需要转化成树形结构
      this.permissionList = transListToTree(await getPermissionListApi(), '0')
    }
  }
}
</script>

<style>

</style>
